.split-line-wrapper {
  height: 0.186666666666667rem;
  background: #f5f5f5;
}
html,
body {
  width: 100%;
  height: 100%;
  background: #fcfcfc;
  overflow: hidden;
}
html .rank-wrapper,
body .rank-wrapper {
  padding-top: 1.333333333333333rem;
}
html .rank-wrapper .head-wrapper,
body .rank-wrapper .head-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 1.333333333333333rem;
  background: #fff;
  z-index: 9;
  box-shadow: 0 1px 10px rgba(0,0,0,0.08);
  font-size: 0;
  color: #000;
}
html .rank-wrapper .head-wrapper .back-home,
body .rank-wrapper .head-wrapper .back-home {
  width: 1.333333333333333rem;
  padding-left: 0.4rem;
  background: url("../img/back-icon.png") no-repeat left center;
  background-size: 0.226666666666667rem 0.4rem;
  font-size: 0.426666666666667rem;
  font-family: SimHei;
  color: #666;
  height: 1.333333333333333rem;
  line-height: 1.333333333333333rem;
  margin-left: 0.533333333333333rem;
}
html .rank-wrapper .head-wrapper .sex-btn,
body .rank-wrapper .head-wrapper .sex-btn {
  width: 1.866666666666667rem;
  height: 1.333333333333333rem;
  line-height: 1.333333333333333rem;
  font-size: 0.4rem;
}
html .rank-wrapper .head-wrapper .sex-btn.active,
body .rank-wrapper .head-wrapper .sex-btn.active {
  color: #f86161;
}
html .rank-wrapper .head-wrapper .sex-btn.active .bottom-line,
body .rank-wrapper .head-wrapper .sex-btn.active .bottom-line {
  bottom: 0;
  width: 0.666666666666667rem;
  left: 0.586666666666667rem;
  height: 0.08rem;
  border-radius: 0.053333333333333rem;
  background: #f86161;
}
html .rank-wrapper .rank-content-wrapper,
body .rank-wrapper .rank-content-wrapper {
  font-size: 0;
}
html .rank-wrapper .rank-content-wrapper .rank-cat-list,
body .rank-wrapper .rank-content-wrapper .rank-cat-list {
  vertical-align: top;
  width: 2.506666666666667rem;
  font-size: 0.373333333333333rem;
  color: #000;
  background: #f2f2f2;
}
html .rank-wrapper .rank-content-wrapper .rank-cat-list ul li,
body .rank-wrapper .rank-content-wrapper .rank-cat-list ul li {
  position: relative;
  padding: 0.48rem 0.4rem;
  position: relative;
}
html .rank-wrapper .rank-content-wrapper .rank-cat-list ul li:after,
body .rank-wrapper .rank-content-wrapper .rank-cat-list ul li:after {
  position: absolute;
  width: 100%;
  left: 0;
  bottom: 0;
  border-top: 1px solid #ecebeb;
  content: '';
}
html .rank-wrapper .rank-content-wrapper .rank-cat-list ul li.active,
body .rank-wrapper .rank-content-wrapper .rank-cat-list ul li.active {
  background: #fff;
}
html .rank-wrapper .rank-content-wrapper .rank-cat-list ul li.active .left-line,
body .rank-wrapper .rank-content-wrapper .rank-cat-list ul li.active .left-line {
  height: 100%;
  left: 0;
  top: 0;
  width: 0.08rem;
  background: #f86161;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list,
body .rank-wrapper .rank-content-wrapper .rank-detail-list {
  padding: 0rem 0.266666666666667rem;
  margin-top: 0.48rem;
  overflow-y: auto;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list .load-wrapper,
body .rank-wrapper .rank-content-wrapper .rank-detail-list .load-wrapper {
  padding: 5px 0;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list .no-more,
body .rank-wrapper .rank-content-wrapper .rank-detail-list .no-more {
  text-align: center;
  font-size: 0.293333333333333rem;
  padding: 0.266666666666667rem 0;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul {
  width: 6.933333333333334rem;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li {
  margin-bottom: 0.533333333333333rem;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li:last-child,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li:last-child {
  margin-bottom: 0;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li:nth-child(1) .book-wrapper .book-detail .order-num,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li:nth-child(1) .book-wrapper .book-detail .order-num,
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li:nth-child(2) .book-wrapper .book-detail .order-num,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li:nth-child(2) .book-wrapper .book-detail .order-num,
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li:nth-child(3) .book-wrapper .book-detail .order-num,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li:nth-child(3) .book-wrapper .book-detail .order-num {
  color: #ed4343;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper {
  width: 6.933333333333334rem;
  font-size: 0;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-cover,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-cover {
  width: 1.493333333333333rem;
  height: 1.893333333333333rem;
  vertical-align: top;
  box-shadow: 0.5px 0.5px 6px 0.5px #ccc;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail {
  margin-left: 0.266666666666667rem;
  width: 5.173333333333333rem;
  font-size: 0.346666666666667rem;
  color: #666;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .order-num,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .order-num {
  right: 0;
  top: 0;
  font-family: MicrosoftYaHei-Bold;
  font-size: 0.48rem;
  color: #b6b6b6;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .book-name,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .book-name {
  font-size: 0.4rem;
  color: #000;
  margin-bottom: 0.213333333333333rem;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .book-desc,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .book-desc {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-bottom: 0.4rem;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .status-and-cat,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .status-and-cat {
  font-size: 0.293333333333333rem;
  color: #999;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .status-and-cat .cat,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .status-and-cat .cat {
  padding: 0.026666666666667rem 0.08rem 0rem 0.12rem;
  position: relative;
  top: -0.053333333333333rem;
  margin-right: 0.053333333333333rem;
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .status-and-cat .cat:after,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .status-and-cat .cat:after {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 200%;
  border: 1px solid #999;
  content: '';
}
html .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .status-and-cat .cat:after,
body .rank-wrapper .rank-content-wrapper .rank-detail-list ul li .book-wrapper .book-detail .status-and-cat .cat:after {
  border-radius: 0.213333333333333rem;
}
html .rank-wrapper .bottom-nav-wrapper,
body .rank-wrapper .bottom-nav-wrapper {
  position: relative;
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 0.16rem 0.933333333333333rem;
  font-size: 0;
  background: #fff;
  z-index: 9;
}
html .rank-wrapper .bottom-nav-wrapper:after,
body .rank-wrapper .bottom-nav-wrapper:after {
  position: absolute;
  width: 100%;
  left: 0;
  top: 0;
  border-top: 1px solid #e2e2e2;
  content: '';
}
html .rank-wrapper .bottom-nav-wrapper li,
body .rank-wrapper .bottom-nav-wrapper li {
  width: 1.333333333333333rem;
  font-size: 0.293333333333333rem;
  color: #666;
  margin-right: 0.933333333333333rem;
  text-align: center;
}
html .rank-wrapper .bottom-nav-wrapper li:last-child,
body .rank-wrapper .bottom-nav-wrapper li:last-child {
  margin-right: 0;
}
html .rank-wrapper .bottom-nav-wrapper li div,
body .rank-wrapper .bottom-nav-wrapper li div {
  width: 1.333333333333333rem;
  height: 1.013333333333333rem;
}
html .rank-wrapper .bottom-nav-wrapper li .shelf-icon-wrapper,
body .rank-wrapper .bottom-nav-wrapper li .shelf-icon-wrapper {
  background: url("../img/shelf-icon.png") no-repeat center center;
  background-size: 0.52rem 0.6rem;
}
html .rank-wrapper .bottom-nav-wrapper li .index-icon-wrapper,
body .rank-wrapper .bottom-nav-wrapper li .index-icon-wrapper {
  background: url("../img/index-icon.png") no-repeat center center;
  background-size: 0.613333333333333rem 0.586666666666667rem;
}
html .rank-wrapper .bottom-nav-wrapper li .rank-icon-wrapper,
body .rank-wrapper .bottom-nav-wrapper li .rank-icon-wrapper {
  background: url("../img/cat-icon.png") no-repeat center center;
  background-size: 0.613333333333333rem 0.613333333333333rem;
}
html .rank-wrapper .bottom-nav-wrapper li .mine-icon-wrapper,
body .rank-wrapper .bottom-nav-wrapper li .mine-icon-wrapper {
  background: url("../img/mine-icon.png") no-repeat center center;
  background-size: 0.586666666666667rem 0.586666666666667rem;
}
html .rank-wrapper .special-wrapper,
body .rank-wrapper .special-wrapper {
  font-size: 0;
}
html .rank-wrapper .special-wrapper li,
body .rank-wrapper .special-wrapper li {
  width: 4.466666666666667rem;
  padding: 0.533333333333333rem 0 0.533333333333333rem 0.533333333333333rem;
}
html .rank-wrapper .special-wrapper li .left-wrapper,
body .rank-wrapper .special-wrapper li .left-wrapper {
  width: 2.4rem;
  font-size: 0.293333333333333rem;
}
html .rank-wrapper .special-wrapper li .left-wrapper .special-name,
body .rank-wrapper .special-wrapper li .left-wrapper .special-name {
  font-family: SimHei;
  color: #fc6a0e;
  font-size: 0.4rem;
  margin-bottom: 0.266666666666667rem;
}
html .rank-wrapper .special-wrapper li .left-wrapper .special-desc,
body .rank-wrapper .special-wrapper li .left-wrapper .special-desc {
  color: #999;
}
html .rank-wrapper .special-wrapper li .right-wrapper,
body .rank-wrapper .special-wrapper li .right-wrapper {
  vertical-align: top;
  width: 2.026666666666667rem;
  height: 1.066666666666667rem;
}
html .rank-wrapper .special-wrapper li .tv,
body .rank-wrapper .special-wrapper li .tv {
  background: url("../img/tv-icon.png") no-repeat center center;
  background-size: contain;
}
html .rank-wrapper .special-wrapper li .book,
body .rank-wrapper .special-wrapper li .book {
  background: url("../img/book-icon.png") no-repeat center center;
  background-size: contain;
}
html .rank-wrapper .special-wrapper li .bag,
body .rank-wrapper .special-wrapper li .bag {
  background: url("../img/bag-icon.png") no-repeat center center;
  background-size: contain;
}
html .rank-wrapper .special-wrapper li .coin,
body .rank-wrapper .special-wrapper li .coin {
  background: url("../img/coin-icon.png") no-repeat center center;
  background-size: contain;
}
html .rank-wrapper .back-top-wrapper,
body .rank-wrapper .back-top-wrapper {
  position: fixed;
  right: 0.266666666666667rem;
  bottom: 2.133333333333333rem;
  width: 0.933333333333333rem;
  height: 0.933333333333333rem;
  background: url("../img/back-top-icon.png") no-repeat center center;
  background-size: 0.933333333333333rem 0.933333333333333rem;
  z-index: 9;
  opacity: 0;
}
